<template>
	<Search title="推荐" />
	<Layout pagename="index">
		<view class="banner">
			<swiper indicator-dots autoplay :interval="2000" :duration="600" circular indicator-active-color="#ffffff">
				<swiper-item v-for="item in banners" :key="item._id">
					<image :src="item.picurl" mode="aspectFit"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="speakers">
			<view class="icon">
				<uni-icons type="sound-filled" size="30" color="#22b98c"></uni-icons>公告
			</view>
			<view class="speaker">
				<swiper autoplay circular :interval="2000" :duration="500" vertical>
					<swiper-item v-for="item in notices" :key="item._id">
						<navigator :url="`/pages/notice/detail?id=${item._id}`">
							{{item.title}}
						</navigator>
					</swiper-item>
				</swiper>
			</view>
			<view class="icon">
				<uni-icons type="right" size="24" color="#a9a9a9"></uni-icons>
			</view>
		</view>
		<view class="box">
			<Title>
				<template #name>每日推荐</template>
				<template #custom>
					<view class="calendar">
						<uni-icons type="calendar" size="24" color="#22b98c"></uni-icons>
						<uni-dateformat :date="Date()" format="dd号"></uni-dateformat>
					</view>
				</template>
			</Title>
			<view class="list">
				<scroll-view scroll-x>
					<view v-for="item in recommends" :key="item" class="list-item">
						<image :src="item.smallPicurl" mode="aspectFill"></image>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="box">
			<Title>
				<template #name>专题精选</template>
				<template #custom>
					<view class="calendar">
						<uni-icons type="list" size="24" color="#22b98c"></uni-icons>
						<navigator url="/pages/classify/classify" open-type="reLaunch">
							更多
						</navigator>
					</view>
				</template>
			</Title>
			<view class="grid">
				<Item v-for="item in classfiys" :item="item" :key="item" />
				<view class="more">
					<image src="/assets/more.jpg" mode="aspectFill"></image>
					<view>
						<uni-icons type="images" size="40" color="#fff"></uni-icons>
						更多
					</view>
				</view>
			</view>
		</view>
	</Layout>
</template>

<script setup>
	import {ref,onMounted} from "vue";
	import Layout from "../../layout/Layout.vue"
	import Search from "../../components/search.vue";
	import Title from "../../components/title.vue";
	import Item from "../../components/item.vue";
	import {GetHomeBanners,GetHomeNotice,GetDayRecommend,GetClassify} from "../../api/index.js";

	const banners = ref([]);
	const notices = ref([]);
	const recommends = ref([]);
	const classfiys = ref([]);
	
	onMounted(async ()=>{
		// 首页banner
		const res1 = await GetHomeBanners();
		banners.value=res1.data;
		// 公告notice
		const res2 = await GetHomeNotice({select:true});
		notices.value=res2.data;
		// 每日推荐
		const res3 = await GetDayRecommend();
		recommends.value=res3.data;
		// 分类信息
		const res4 = await GetClassify({select:true});
		classfiys.value=res4.data;
	})
</script>

<style lang="scss" scoped>
	.banner {
		border-radius: 12rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 342rpx;
		}
	}

	.speakers {
		margin: 30rpx 0rpx;
		background-color: #f9f9f9;
		padding:16rpx 30rpx;
		border-radius: 42rpx;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		box-shadow: 1rpx 1rpx 10rpx rgba(0, 0, 0, 0.14);

		.icon {
			color: #22b98c;
			display: flex;
			align-items: center;
			font-weight: bold;
		}

		.speaker {
			width: 400rpx;
			margin-left: 40rpx;
			margin-right: 20rpx;
			swiper {
				height: 40rpx;
				line-height: 40rpx;
			}

			swiper-item {
				color: #4a4a4a;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}

	.box {
		.calendar {
			display: flex;
			color: #22b98c;
			align-items: center;
		}

		.list {
			scroll-view {
				white-space: nowrap;

				.list-item {
					display: inline-block;
					width: 200rpx;
					height: 430rpx;
					margin-right: 16rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 12rpx;
					}

					&:nth-last-of-type(1) {
						margin-right: 0rpx;
					}
				}
			}
		}
		.grid {
			display: grid;
			grid-template-rows: repeat(3, 342rpx);
			grid-template-columns: repeat(3, 219rpx);
			gap: 16rpx;

			.more {
				border-radius: 12rpx;
				overflow: hidden;
				position: relative;
				color: #fff;
				font-size: 30rpx;

				image {
					width: 100%;
					height: 100%;
				}

				view {
					position: absolute;
					width: 100%;
					height: 100%;
					backdrop-filter: blur(20rpx);
					background-color: rgba(0, 0, 0, 0.2);
					z-index: 1;
					left: 0rpx;
					top: 0rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>